<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}
		body {
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-image: radial-gradient(white, black);
		}
		ul {
			width: 550px;
			height: 300px;
			overflow: hidden;
			cursor: pointer;
		}
		li {
			float: left;
			width: 110px;
			height: 300px;
			list-style: none;
			transition: all 1s;
			position: relative;
		}
		li::after {
			content: 'Night';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 450px;
			height: 30px;
			line-height: 30px;
			font-size: 16px;
			text-align: center;
			color: rgb(243, 230, 230);
			background-color: rgba(48, 46, 46, .5);
		}
		img {
			height: 100%;
			width: 450px;
		}
		ul:hover li {
			width: 25px;
		}
		ul li:hover {
			width: 450px;
		}
	
	</style>
</head>
<body>
	
	<ul>
		<li><img src="1.jpg" alt="">
			<div>Night</div>
		</li>
		<li><img src="2.jpg" alt="">
			<div>Night</div>
		</li>
		<li><img src="4.jpg" alt="">
			<div>Night</div>
		</li>
		<li><img src="3.jpg" alt="">
			<div>Night</div>
		</li>
		<li><img src="5.jpg" alt="">
			<div>Night</div>
		</li>
	</ul>

</body>
</html>
